<template>
    <div v-if="list.length">
        <div style="padding: 24px 0; background: #fff" class="preview-card" v-for="(item, index) of list" :key="index">
            <div style="padding: 0 24px">
                <flexbox justify="space-between">
                    <flexbox>
                        <span style="font-size: 24px; color: #172b4d" class="font-w-b"> {{ item.pmpProductDetailDTO.systemName }} </span>
                        <a-tag color="cyan" style="margin-left: 12px">{{ item.pmpProductDetailDTO.catalogType === '1' ? '产品' : '子产品' }}</a-tag>
                        <flexbox style="margin-left: 4px" v-if="item.jiraErrorMsg">
                            <ExclamationCircleFilled style="color: red" />
                            <span style="margin-left: 4px"> {{ item.jiraErrorMsg }} </span>
                        </flexbox>
                    </flexbox>
                    <flexbox>
                        <flexbox
                            style="cursor: pointer"
                            @click="handleDetail(item.pmpProductDetailDTO.catalogCode)"
                            v-if="
                                item.pmpProductDetailDTO.isSettingReport &&
                                ((reportType == 1 && item.pmpProductDetailDTO.isMonth == 1) ||
                                    (reportType == 2 && item.pmpProductDetailDTO.isQuarter == 1) ||
                                    (reportType == 3 && item.pmpProductDetailDTO.isHalfYear == 1) ||
                                    (reportType == 4 && item.pmpProductDetailDTO.isYear == 1))
                            "
                        >
                            <span style="margin: 0 6px 0 24px">报告详情</span>
                            <RightOutlined />
                        </flexbox>
                    </flexbox>
                </flexbox>

                <flexbox style="width: 100%; margin: 12px 0 0px 0">
                    <a-row style="width: 100%">
                        <a-col :span="4">
                            <span>管理平台：</span>
                            <span> {{ item.pmpProductDetailDTO.isOutsideSystem === '0' ? '技术中台' : 'JIRA' }}</span>
                        </a-col>
                        <a-col :span="3">
                            <span>发版周期：</span>
                            <span> {{ item.releasePeriodAvgWeeks ? `${item.releasePeriodAvgWeeks}周` : '不固定' }}</span>
                        </a-col>
                        <a-col :span="3">
                            <span>数据来源：</span>
                            <span>{{
                                item.dataSource === '外部' ? (item.pmpProductDetailDTO.projectKey ? 'jira导入' : '手动填报') : '技术中台'
                            }}</span>
                        </a-col>
                        <a-col :span="6">
                            <span> 全生命周期管理阶段：</span>
                            <span> {{ item.pmpProductDetailDTO.isOutsideSystem === '0' ? '全生命周期' : '需求研发、需求测试' }}</span>
                        </a-col>

                        <a-col :span="8">
                            <flexbox align="flex-start">
                                <span> 产品类型：</span>
                                <flexbox
                                    align="flex-start"
                                    style="margin-top: -2px"
                                    v-if="$filters.systemProductTypeFilter(item.pmpProductDetailDTO.productType)"
                                >
                                    <a-tag
                                        :color="getRandomColor(index)"
                                        v-for="(item, index) of $filters.systemProductTypeFilter(item.pmpProductDetailDTO.productType).split(',')"
                                        :key="item"
                                    >
                                        {{ item }}
                                    </a-tag>
                                </flexbox>
                            </flexbox>
                        </a-col>
                    </a-row>
                </flexbox>
            </div>
            <flexbox>
                <flexbox style="width: 100%; margin-top: 40px" direction="column" v-if="item.isNoData === '1'">
                    <a-empty description="本周期内没有可汇报需求" />
                </flexbox>
                <div style="width: 100%" v-else>
                    <JiraXuqiuGuanli
                        :info="item.requireInfos"
                        :detail="item"
                        v-if="item.dataSource === '外部' && item.pmpProductDetailDTO.projectKey"
                    />
                    <XuqiuGuanli :info="item.requireInfos" :detail="item" v-else />
                </div>
            </flexbox>
        </div>
    </div>
</template>

<script lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { RightOutlined, MinusOutlined, ExclamationCircleFilled } from '@ant-design/icons-vue';
import XuqiuGuanli from './components/XuqiuGuanli.vue';
import JiraXuqiuGuanli from './components/JiraXuqiuGuanli.vue';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        RightOutlined,
        MinusOutlined,
        ExclamationCircleFilled,
        XuqiuGuanli,
        JiraXuqiuGuanli
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        queryArr: {
            type: Array,
            default: () => []
        },
        searchQuery: {
            type: Object,
            default: () => ({})
        },
        reportName: {
            type: String,
            default: ''
        },
        reportType: {
            type: String,
            default: ''
        }
    },
    emits: ['getItemData'],
    setup(props, { emit }) {
        const router = useRouter();
        const route = useRoute();
        const state = reactive<any>({});
        const getRandomColor = (index) => {
            const num = index % 3;
            switch (num) {
                case 0:
                    return 'green';
                case 1:
                    return 'blue';
                case 2:
                    return 'orange';
                default:
                    return 'green';
            }
        };
        const handleDetail = (catalogCode) => {
            router.push({
                path: '/energyManage/analysisReport/preview',
                query: {
                    id: route.query.id,
                    catalogCode,
                    startTime: props.searchQuery.startTime,
                    endTime: props.searchQuery.endTime,
                    reportName: props.reportName
                }
            });
        };
        watch(
            () => props.list,
            (n) => {},
            {
                deep: true
            }
        );
        return {
            ...toRefs(state),
            getRandomColor,
            handleDetail
        };
    }
});
</script>

<style scoped lang="less">
.card-item-left,
.card-item-center,
.card-item-right {
    padding: 16px 24px;
    height: 250px;
    background: #ffffff;
}
.card-item-left {
    width: 18%;
    .title {
        font-size: 14px;
        color: #505a6e;
    }
    .line-1 {
        width: 3px;
        height: 10px;
        background: #ffd271;
    }
    .line-2 {
        width: 3px;
        height: 10px;
        background: #f7762a;
    }
    .line-3 {
        width: 3px;
        height: 10px;
        background: #3f76fc;
    }
    .type {
        margin-left: 36px;
        font-size: 14px;
        color: #8590a5;
    }
    .num {
        font-size: 18px;
    }
}
.card-item-center {
    width: calc(41% - 24px);
    margin-left: 24px;
    &-chart {
        width: 50%;
        height: 170px;
        position: relative;
    }
}
.card-item-right {
    width: calc(41% - 24px);
    margin-left: 24px;
}

::v-deep(.ant-select-selector) {
    height: 29px !important;
}
.preview-card {
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    min-height: 320px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 12px;
    &:hover {
        border-color: #00000017;
        box-shadow: 0 2px 8px #00000017;
    }
}
</style>